<template>
  <div class="week-content">
    <div class="flex alignCenter justifyBetween header" v-if="weeks.length">
      <div>{{weeks[0].date}} ~ {{weeks[weeks.length - 1].date}}</div>
      <div class="act flex alignCenter">
        <div @click="setWeek('pre')">{{"<"}}</div>
        <div @click="setWeek('cur')">本周</div>
        <div @click="setWeek('next')">{{">"}}</div>
      </div>
    </div>

    <div class="flex justifyBetween table">
      <div class="left">
        <div class="item" v-for="(item, index) in range" :key="index">
          <div class="time">{{item}}</div>
        </div>
      </div>
      <div class="right">
        <div class="title flex alignCenter">
          <div v-for="(item, index) in weeks" :key="index" class="item flex alignCenter justifyCenter">{{item.showDate}}
            <div v-if="item.isCurDate" class="is-cur-date">（今天）</div>
            <div v-else>（{{proxy.$utils.getDayOfWeek(item.date)}}）</div>
          </div>
        </div>
        <div class="con" ref="conRef">
          <div class="el" v-for="(item, index) in range" :key="index">
            <div v-for="(el,idx) in 7" :key="idx" class="col"></div>
          </div>
          <div class="box" @mouseenter="onMouseEnter(item)" @mousemove="onMouseMove" @mouseleave="onMouseLeave" v-for="(item, index) in list" :key="index" :style="boxStyle(item,index)">
            <div class="timeRange">{{item.timeRange}}</div>
            <div class="className">{{item.className}}</div>
            <div class="classAddress">{{item.classAddress}}</div>
            <div class="teachingTeacher">{{item.teachingTeacher}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 排期详情 -->
    <lessonSchedulePopover :scheduleId="info._id" :mouseParams="mouseParams"></lessonSchedulePopover>
  </div>
</template>

<script setup lang="ts">
import lessonSchedulePopover from "@/views/courseManage/components/lessonSchedulePopover.vue";
let props = defineProps(["modelValue"]);
const { proxy } = getCurrentInstance();

let curDate = ref(new Date());
let info = ref({});
let mouseParams = ref({});

let weeks = computed(() => {
  return getWeek(curDate.value);
});

let range = computed(() => {
  return generateTimeIntervals("8:00", "20:00");
});

let list = computed(() => {
  return proxy.$utils.deepcopy(props.modelValue);
});

function onMouseEnter(params) {
  info.value = params;
}

function onMouseMove(params) {
  mouseParams.value = params;
}

function onMouseLeave() {
  info.value = {};
  mouseParams.value = {};
}

function boxStyle(params, idx) {
  let conCom = proxy.$refs.conRef;
  if (!conCom) return;
  let itemWidth = conCom.offsetWidth / 7;
  let left = 0;
  let top = 0;
  let height = 0;
  let total1 = 0;
  let total2 = 0;
  list.value.forEach((element, index) => {
    if (idx > index && element.date == params.date) total1++;
    if (element.date == params.date) total2++;
  });

  let index = proxy.$utils.findIndexByField(weeks.value, "date", params.date);
  let current = range.value.indexOf(params.classStartTime);
  if (index != -1) left = index * itemWidth;
  if (current != -1) {
    top = current * 45;
    let rang = generateTimeIntervals(
      params.classStartTime,
      params.classEndTime
    );
    height = rang.length * 45;
  }
  if (index != -1 && height) {
    let width = itemWidth / total2 - 5;
    return {
      left: `${left + total1 * width + 5 * total1}px`,
      top: `${top}px`,
      height: `${height}px`,
      width: `${width}px`,
      background: params.classColor || proxy.$utils.getColor(params.className),
    };
  }
}

function setWeek(type) {
  let currentDate = curDate.value;
  let date;
  if (type == "pre") {
    date = currentDate.setDate(currentDate.getDate() - 7);
  } else if (type == "cur") {
    date = Date.now();
  } else {
    date = currentDate.setDate(currentDate.getDate() + 7);
  }
  curDate.value = new Date(date);
}

function getWeek(time) {
  let list = [];
  let weekList = getWeekDates(time);
  weekList.forEach((element) => {
    list.push({
      date: element,
      showDate: proxy.$utils.dateTimeFormateFn(element, "monthDate"),
      isCurDate: proxy.$utils.dateTimeFormateFn(Date.now()) == element,
    });
  });
  return list;

  function getWeekDates(date) {
    const dayOfWeek = date.getDay();
    const sundayDate = new Date(date);
    sundayDate.setDate(date.getDate() - dayOfWeek);

    const weekDates = [];
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(sundayDate);
      currentDate.setDate(sundayDate.getDate() + i);
      weekDates.push(proxy.$utils.dateTimeFormateFn(currentDate));
    }
    return weekDates;
  }
}

function generateTimeIntervals(startTime, endTime) {
  const startHour = parseInt(startTime.split(":")[0]);
  const startMinute = parseInt(startTime.split(":")[1]);
  const endHour = parseInt(endTime.split(":")[0]);
  const endMinute = parseInt(endTime.split(":")[1]);

  const intervals = [];
  let currentHour = startHour;
  let currentMinute = startMinute;

  while (
    currentHour < endHour ||
    (currentHour === endHour && currentMinute <= endMinute)
  ) {
    intervals.push(
      `${currentHour.toString().padStart(2, "0")}:${currentMinute
        .toString()
        .padStart(2, "0")}`
    );
    currentMinute += 30;
    if (currentMinute >= 60) {
      currentMinute -= 60;
      currentHour++;
    }
  }
  return intervals;
}
</script>



<style lang="scss" scoped>
.is-cur-date {
  color: red;
}
.header {
  background-color: #f8f8f9;
  padding: 10px 15px;
  font-size: 15px;
  .act {
    div {
      color: #2269f1;
      background: white;
      padding: 5px 15px;
      border-radius: 15px;
      margin: 0 10px;
      font-weight: bold;
      cursor: pointer;
    }
  }
}
.table {
  align-items: flex-start;
  font-size: 15px;

  .left {
    width: 100px;
    text-align: center;
    margin-top: 50px;
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    flex-shrink: 0;
    .item {
      width: 100px;
      flex-shrink: 0;
      line-height: 45px;
      height: 45px;
      border-right: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;
    }
  }
  .right {
    width: 100%;
    .title {
      width: 100%;
      //border-left: 1px solid #f0f0f0;
      border-top: 1px solid #f0f0f0;
      background-color: #f8f8f9;
      .item {
        line-height: 50px;
        height: 50px;
        width: calc(100% / 7);
        text-align: center;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        font-weight: bold;
        flex-shrink: 0;
      }
    }
    .con {
      position: relative;
      width: 100%;
      .box {
        position: absolute;
        z-index: 1;
        padding: 15px;
        font-size: 14px;
        div {
          margin-bottom: 10px;
          color: white;
        }
      }
      .el {
        width: 100%;
        height: 45px;
        border-bottom: 1px solid #f0f0f0;
        flex-shrink: 0;
        display: flex;
        .col {
          flex-shrink: 0;
          width: calc(100% / 7);
          border-right: 1px solid #f0f0f0;
          line-height: 45px;
          height: 45px;
        }
      }
    }
  }
}
</style>
